.intelligent-video-container {
  pointer-events: none;
  width: 100%;
  height: 100%;
  padding: 0 20px 30px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  overflow: hidden;

  .fade-left-enter-active,
  .fade-right-enter-active {
    transition: transform 0.5s ease-out;
  }

  .fade-left-leave-active,
  .fade-right-leave-active {
    transition: opacity 0.3s ease-in-out;
  }

  .fade-left-enter {
    transform: translateX(-100%);
  }

  .fade-right-enter {
    transform: translateX(100%);
  }

  .fade-left-leave-to {
    opacity: 0;
  }

  .fade-right-leave-to {
    opacity: 0;
  }

  * {
    pointer-events: all;
  }

  .el-table {
    &::before {
      width: 0;
      height: 0;
    }

    background: transparent;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;

    .el-table__header-wrapper {
      width: 100%;
      height: 30px;
    }

    .el-table__body-wrapper {
      width: 100%;
      flex: 1;
      overflow-x: auto;
      overflow-y: auto;
    }

    * {
      background: transparent !important;
    }

    *:hover {
      background: transparent;
    }

    tr.el-table__row:hover {
      background: transparent;
    }

    thead tr th {
      color: white;
      border: none;
      padding: 5px;
    }

    tbody tr td {
      color: white;
      padding: 2px 0;
      border: none;
    }
  }

  .el-select {
    display: block;
    height: 90%;
    width: 40%;

    * {
      background: transparent !important;
      color: white !important;
      font-weight: bold !important;
      border: 0;
      outline: 0;
    }

    input {
      color: white;
      font-size: 14px;
      padding-left: 0;
      height: 100%;
      margin-top: 7px;
    }
  }

  .left-con,
  .right-con {
    width: 25%;
    height: 99%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & > div {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;

      .part-header-con {
        width: 100%;
        height: 30px;
        background: url("../../assets/intelligent-video/上.png") no-repeat 0 0;
        background-size: 100% 100%;
        font-size: 20px;
        color: white;
        padding-left: 10px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .part-content-con {
        width: 100%;
        flex: 1;
        background: url("../../assets/intelligent-video/下.png") no-repeat 0 0;
        background-size: 100% 100%;
        overflow: hidden;
        position: relative;

        & > img,
        & > iframe {
          width: 95%;
          height: 95%;
          margin-top: 5px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }

        .imgs-container {
          width: 100%;
          height: 100%;
          overflow: auto;
          padding: 5px;

          .img-conta {
            width: 100%;
            height: 100px;
            display: flex;
            margin-bottom: 10px;
            overflow: hidden;

            & > div:nth-of-type(1) {
              height: 100%;
              width: 40%;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #01d6ba;

              img {
                width: 100%;
                height: 100%;
                cursor: pointer;
              }
            }

            & > div:nth-of-type(2) {
              height: 100%;
              flex: 1;
              display: flex;
              flex-direction: column;
              padding-left: 10px;

              p {
                width: 100%;
                flex: 1;
                display: flex;
                align-items: center;

                span {
                  font-size: 14px;
                  color: white;
                  font-weight: bold;
                }

                span:nth-of-type(1) {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }

  .left-con {
    & > div:nth-of-type(1) {
      height: 100%;
    }
  }

  .right-con {
    & > div {
      height: 32.5%;
    }
  }

  .el-dialog {
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .el-dialog__header {
      padding: 0;
      background: url("../../assets/intelligent-video/上.png") no-repeat 0 0;
      background-size: 100% 100%;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 20px;
      position: relative;

      span {
        font-size: 20px;
        font-weight: bold;
        color: white;
      }

      .el-dialog__headerbtn {
        top: 0;
        bottom: 0;
        margin: auto;

        i {
          color: white;
          font-weight: bold;
        }
      }
    }

    .el-dialog__body {
      width: 100%;
      flex: 1;
      background: url("../../assets/intelligent-video/下.png") no-repeat 0 0;
      background-size: 100% 100%;
      padding: 5px 10px 10px;
    }
  }

  .dialog-container {
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: space-between;

    .dialog-left {
      width: 64.3%;
      height: 100%;
      border: 1px solid #01d6ba;

      iframe {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .dialog-right {
      width: 35%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .dialog-right-top {
        width: 100%;
        height: 49.3%;
        border: 1px solid #01d6ba;

        .imgs-container {
          width: 100%;
          height: 100%;
          overflow: auto;
          padding: 5px;

          .img-conta {
            width: 100%;
            height: 100px;
            display: flex;
            margin-bottom: 10px;
            overflow: hidden;

            & > div:nth-of-type(1) {
              height: 100%;
              width: 40%;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #01d6ba;

              img {
                width: 100%;
                height: 100%;
                cursor: pointer;
              }
            }

            & > div:nth-of-type(2) {
              height: 100%;
              flex: 1;
              display: flex;
              flex-direction: column;
              padding-left: 10px;

              p {
                width: 100%;
                flex: 1;
                display: flex;
                align-items: center;

                span {
                  font-size: 14px;
                  color: white;
                  font-weight: bold;
                }

                span:nth-of-type(1) {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }

      .dialog-right-bottom {
        width: 100%;
        height: 49.3%;
        border: 1px solid #01d6ba;
      }
    }
  }

  .dialog-img-con {
    width: 100%;
    height: 600px;
    border: 1px solid #01d6ba;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
